<template>
  <div class="bigBox">
    <!-- 即将直播 (本页面公共样式的标题，下面直接拿来用)-->
    <div class="commonTit">
      <h4 class="com-tittle">即将直播</h4>
    </div>
    <div class="contents">
      <div class="con-live" v-for="list in res.daniu" :key="list.id">
        <div class="c-item">
          <div class="player" v-if="list.id == 617">
            <div class="imgs"></div>
          </div>
          <div class="player" v-else>
            <img :src="`https://ss.lanqb.com/${list.posters.mobile}`" alt="" />
          </div>
          <div class="diff" @click="jump(list.id)">
            <p class="periods">第{{ list.periods }}期</p>
            <h4>{{ list.title }}</h4>
            <div class="con-info">
              <img
                :src="`https://ss.lanqb.com/${list.profile.avatar}`"
                alt=""
                class="avatar"
              />
              <p class="nickname">{{ list.profile.nickname }}</p>
            </div>
            <div class="con-details">
              <div class="left">
                <p class="begin">时间: {{ list.begin_at }}</p>
                <p class="begin">{{ list.statistic.purchases }}人感兴趣</p>
              </div>
              <div class="right" v-if="list.id == 617">立即报名</div>
              <div class="right" v-else>预约报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 往期直播 (本页面公共样式的标题，下面直接拿来用)-->
    <div class="commonTit">
      <h4 class="com-tittle">即将直播</h4>
    </div>
    <div class="courseBox">
      <div
        class="course-item"
        v-for="item in res.course"
        :key="item.id"
        @click="agoLive(item.id)"
      >
        <div class="leftBox">
          <img :src="`https://ss.lanqb.com/${item.posters.mobile}`" alt="" />
          <p class="periods">第{{ item.periods }}期</p>
        </div>
        <div class="rightBox">
          <h3 class="r-tit">{{ item.title }}</h3>
          <div class="r-info">
            <img
              :src="`https://ss.lanqb.com/${item.user_profile.avatar}`"
              alt=""
            />
            <p class="r-nickname">{{ item.user_profile.nickname }}</p>
          </div>
          <p class="r-time">时间: {{ item.begin_at }}</p>
          <p class="r-time">{{ item.statistic.purchases }}人感兴趣</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getCurrentInstance, reactive } from "vue";
const { $axios, $request } =
  getCurrentInstance().appContext.config.globalProperties;

// 图片路径前缀  url:"https://ss.lanqb.com/"
let res = reactive({
  daniu: [], // 往期直播
  course: [], // 即将直播
});

// (即将直播) 详情页跳转
const router = useRouter();
let jump = (cid) => {
  router.push({
    name: "DachuLiveDetails",
    query: { id: cid },
  });
};
// (往期直播) 详情页跳转 https://m.lanqb.com/api/daniu/614
let agoLive = (sid) => {
  router.push({
    name: "DachuLiveDetailsAgo",
    query: { ids: sid },
  });
};

// https://m.lanqb.com/api/daniu?link=paging&live=3&heat=N&page=1&is_live=1
$axios(
  `/lanqb/api/daniu?link=paging&live=3&heat=N&page=1&is_live=1`,
  "GET"
).then(({ data }) => {
  res.daniu = data.live;
  // console.log(res.daniu);
  res.course = data.course.data;
  // console.log(res.course);
});
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  height: calc(100vh - 40px - 44px - 45px - 50px);
  overflow-y: scroll;
  background-color: #eee;
  padding: 0 15px;
  // 即将直播 标题
  .commonTit {
    height: 66px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: relative;
    &::before {
      content: "";
      width: 5px;
      height: 5px;
      background-color: #edce8c;
      position: absolute;
      top: 33px;
      left: 10px;
    }
    &::after {
      content: "";
      width: 29px;
      height: 18px;
      position: absolute;
      left: 90px;
      top: 15px;
      background: url(https://assets-cdn.lanqb.com/imgv3/daniu/dn-new_m@2x.png)
        no-repeat 0 100%;
      background-size: cover;
    }
  }
  // 即将直播的内容
  .contents {
    .con-live {
      width: 345px;
      height: 317px;
      background-color: #ffffff;
      border-radius: 5px;
      .c-item {
        width: 345px;
        height: 194px;
        position: relative;
        .player {
          .imgs {
            width: 345px;
            height: 194px;
            border-radius: 5px 5px 0 0;
            background: url("https://img.videocc.net/uimage/8/81327783a8/first_image/28a0e4e1-4fa6-4eee-b861-a356c89a1248_b.jpg")
              center center / 100% 100% no-repeat;
          }
          img {
            width: 345px;
            height: 194px;
          }
        }
        .diff {
          .periods {
            width: 59px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            background-color: #00000066;
            border-radius: 10px;
            position: absolute;
            top: 5px;
            left: 5px;
          }
          h4 {
            font-size: 15px;
            color: #222222;
            margin: 10px;
          }
          .con-info {
            display: flex;
            align-items: center;
            margin: 10px;
            .avatar {
              width: 25px;
              height: 25px;
              border-radius: 50%;
            }
            .nickname {
              margin-left: 5px;
              color: #333333;
              font-size: 13px;
            }
          }
          .con-details {
            height: 30px;
            margin: 10px;
            display: flex;
            justify-content: space-between;
            .left {
              .begin {
                font-size: 12px;
                color: #9f9f9f;
              }
            }
            .right {
              width: 86px;
              height: 32px;
              color: #634b19;
              background-color: #edce8c;
              font-size: 12px;
              line-height: 32px;
              text-align: center;
              border-radius: 16px;
            }
          }
        }
      }
      // 单独再写遍历中第2和3个的样式
      &:nth-child(2),&:nth-child(3) {
        width: 325px;
        height: 105px;
        padding: 10px;
        margin-top: 10px;
        .c-item {
          width: 325px;
          height: 105px;
          display: flex;
          .player {
            img {
              width: 140px;
              height: 105px;
            }
          }
          .diff {
            margin-left: 10px;
            h4 {
              font-size: 13px;
              color: #333333;
              margin: 0 !important;
            }
            .con-info {
              margin: 0 !important;
              padding: 5px 0;
              .avatar {
                width: 17px;
                height: 17px;
              }
              .nickname {
                font-size: 12px;
              }
            }
            .con-details {
              margin: 0 !important;
              .left {
                position: relative;
                .begin {
                  height: 20px;
                  line-height: 20px;
                }
              }
              .right {
                width: 70px;
                height: 24px;
                line-height: 24px;
                position: absolute;
                bottom: 0px;
                right: 0;
              }
            }
          }
        }
      }
    }
  }
  // 第二块： 往期直播的内容
  .courseBox {
    .course-item {
      width: 345px;
      height: 125px;
      background-color: #ffffff;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      display: flex;
      .leftBox {
        position: relative;
        img {
          width: 140px;
          height: 105px;
          border-radius: 5px;
        }
        .periods {
          width: 59px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          background-color: #00000066;
          border-radius: 8px;
          font-size: 12px;
          color: #ffffff;
          position: absolute;
          top: 5px;
          left: 5px;
        }
      }
      .rightBox {
        margin-left: 10px;
        .r-tit {
          font-size: 13px;
          color: #333333;
        }
        .r-info {
          display: flex;
          align-items: center;
          padding: 5px 0;
          img {
            width: 17px;
            height: 17px;
            border-radius: 50%;
          }
          .r-nickname {
            margin-left: 5px;
            font-size: 12px;
            color: #333333;
          }
        }
        .r-time {
          font-size: 12px;
          color: #9f9f9f;
          height: 20px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
